.animate__animated {
	animation-iteration-count: infinite;
	-webkit-animation-duration: 1s;
	animation-duration: 4s;
}

.animate2s {
	animation-iteration-count: infinite;
	-webkit-animation-duration: 1s;
	animation-duration: 2s;
}
.fadeInRight {
    animation-name: fadeInRight;
    -webkit-animation: fadeInRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
//航拍动画
.aerialIcon{
    animation: upDownAni 2s ease-in-out infinite;
}
//上下跳动
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom
}

// Y轴旋转
.flipInY {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY
}

// 热门上下摆动
.rotateUpLeft {
  -webkit-animation-name: rotateUpLeft;
  animation-name: rotateUpLeft
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
//左右上下摇动
.animate__rotateAni{
    -webkit-animation-name: rotateAni;
    animation-name: rotateAni;
}


//音频跳动小图标
.playing__bar {
    display: inline-block;
    width: 6rpx;
    height: 100%;
    -webkit-animation: up-and-down 1.3s ease infinite alternate;
    animation: up-and-down 1.3s ease infinite alternate;
}

.playing__bar1 {
  height: 60%;
}

.playing__bar2 {
  height: 30%;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}

.playing__bar3 {
  height: 75%;
  -webkit-animation-delay: -3.7s;
          animation-delay: -3.7s;
}
@-webkit-keyframes up-and-down {  10% {    height: 30%;  }  30% {    height: 100%;  }  60% {    height: 50%;  }  80% {    height: 75%;  }  100% {    height: 20%;  }}@keyframes up-and-down {  10% {    height: 30%;  }  30% {    height: 100%;  }  60% {    height: 50%;  }  80% {    height: 75%;  }  100% {    height: 20%;  }}
// 从左到右进入
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate(1000px,0); 
        transform: translate(1000px,0); 
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0px,0); 
        transform: translate(0px,0); 
    }
}

/* 缩放动画 */
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


// 左右上下摇动抖动动画
@-webkit-keyframes rotateAni{
	10% { 
	  transform: rotate(15deg); 
	} 
	20% { 
	  transform: rotate(-10deg); 
	} 
	30% { 
	  transform: rotate(5deg); 
	} 
	40% { 
	  transform: rotate(-5deg); 
	} 
	50%,100% { 
	  transform: rotate(0deg); 
	} 
}

//上下跳动
@keyframes upDownAni{
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15rpx);
    }
    100% {
        transform: translateY(0px);
    }
}
@-webkit-keyframes upDownAni{
    0% {
        -webkit-transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(-15rpx);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}

// 上下跳动
@keyframes bounce {
  0%, 100%, 20%, 53%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -16rpx, 0);
    -ms-transform: translate3d(0, -16rpx, 0);
    transform: translate3d(0, -16rpx, 0)
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
    -webkit-transform: translate3d(0, -8rpx, 0);
    -ms-transform: translate3d(0, -8rpx, 0);
    transform: translate3d(0, -8rpx, 0)
  }
  90% {
    -webkit-transform: translate3d(0, -4rpx, 0);
    -ms-transform: translate3d(0, -4rpx, 0);
    transform: translate3d(0, -4rpx, 0)
  }
}

// Y轴旋转
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px)
  }
}

// 热门摆动
@keyframes rotateUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    -ms-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg)
  }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

// 左右移动
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}

@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10rpx, 0, 0);
    transform: translate3d(-10rpx, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10rpx, 0, 0);
    transform: translate3d(10rpx, 0, 0);
  }
}

// loading旋转
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}